<template>
  <div class="categoryItem">
    <div class="content" v-if="list.length !== 0">
      <div
        class="content_item"
        v-for="item in list"
        :key="item.id"
        @click="clickItem(item)"
      >
        <div class="content_item_img">
          <GlobalImageDeep
            :url="item.coverImgUrl"
            :imgWidth="224"
            :imgHeight="224"
          />

          <GlobalPlayMask
            :maskWidth="64"
            :maskHeight="64"
            @maskClick="categoryItemMaskClick(item)"
          />
          <div class="playCount">
            <i
              class="iconfont icon-erji"
              style="color: #ffffff; font-size: 12px; margin-right: 5px"
            ></i>
            {{ getCount(item.playCount) }}
          </div>
        </div>
        <p class="one_txt_cut">{{ item.name }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { getCount } from "../utils/format";
export default {
  name: "categoryItem",
  components: {},
  props: {
    list: {
      type: Array,
      required: true,
      default: () => [],
    },
  },
  data() {
    return {};
  },
  created() {},
  methods: {
    getCount,
    clickItem(item) {
      this.$emit("clickItem", item);
      // console.log(item.id, item.name);
    },
    categoryItemMaskClick(item) {
      this.$router.push(`/categoryDetails/${item.id}`);

      console.log("渲染分类歌单的每一项 的 播放按钮被点击");
    },
  },
  computed: {},
};
</script>

<style lang="less" scoped>
.categoryItem {
  /deep/ .el-image img {
    border-radius: 15px;
  }
  .content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .content_item {
      width: 224px;
      height: 270px;
      padding-bottom: 10px;
      margin-bottom: 10px;

      .content_item_img {
        position: relative;
        width: 224px;
        height: 224px;
        &:hover {
          /deep/ .playMask .play {
            display: block;
            cursor: pointer;
          }
        }
        .playCount {
          position: absolute;
          display: inline-block;
          top: 6px;
          right: 5px;
          height: 24px;
          line-height: 24px;
          padding: 0 8px;
          font-size: 12px;
          border-radius: 12px;
          background: rgba(0, 0, 0, 0.4);
          color: #ffffff;
        }
      }
      p {
        width: 224px;
        color: #333333;
        margin-top: 10px;
        margin-bottom: 10px;
        &:hover {
          color: @globalColor;
          // animation: bounce 1s;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
